<template>
  <div>
    <n-form inline>
      <n-form-item label="条件1" path="user.name">
        <n-input v-model:value="searchParam.one" placeholder="条件1" />
      </n-form-item>
      <n-form-item label="条件2" path="user.name">
        <n-select
          v-model:value="searchParam.two"
          filterable
          label-field="name"
          value-field="id"
          placeholder="条件2"
          :options="options"
        />
      </n-form-item>
      <n-form-item>
        <n-button attr-type="button" @click="search"> 搜索 </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive, onMounted, computed } from 'vue';
  import { getUsers } from '@/api/Demo/Demo';
  const searchParam = reactive({
    one: null,
    two: null,
  });
  const emits = defineEmits(['send']);

  const props = defineProps({
    pageParam: {
      type: Object,
      required: true,
    },
  });

  // 搜索发送消息
  function search() {
    console.log(searchParam);
    emits('send', 'refreshTable', searchParam);
  }

  const options = ref([]);
  // 加载下拉框数据
  const load = async () => {
    const res = await getUsers({});
    options.value = res.data;
  };

  function init(params) {
    // 加载页面初始化数据
    load();
  }
  // 暴漏出init方法
  defineExpose({
    init,
  });
</script>
